<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <div id="container"></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {Line} from '@antv/g2plot';

export default {
  name: 'Demo',
  data() {
    return {
      line: [
        {year: '1991', value: 3},
        {year: '1992', value: 4},
        {year: '1993', value: 3.5},
        {year: '1994', value: 5},
        {year: '1995', value: 4.9},
        {year: '1996', value: 6},
        {year: '1997', value: 7},
        {year: '1998', value: 9},
        {year: '1999', value: 13},
      ]

    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
  },
  mounted() {
    // 当页面挂载的时候
    const data = this.line
    const line = new Line('container', {data, xField: 'year', yField: 'value',});
    line.render()
  }
}
</script>

<style scoped lang="less">
@import "index";
</style>